<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    需求：获取三页数据
    <button>获取数据</button>
    <div id="box"></div>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(function () {
            $('button').on('click', function () {
                $('#box').html('');
                $.get("./json/01.json", "", function (data) {
                    var str = "";
                    data.matchedProducts.forEach(item => {
                        var oP = $(`<p>${item.collection_num} - ${item.pro_title}</p>`);
                        $('#box').append(oP);
                    })
                    $.get("./json/02.json", "", function (data) {
                        var str = "";
                        data.matchedProducts.forEach(item => {
                            var oP = $(`<p>${item.collection_num} - ${item.pro_title}</p>`);
                            $('#box').append(oP);
                        })
                        $.get("./json/03.json", "", function (data) {
                            var str = "";
                            data.matchedProducts.forEach(item => {
                                var oP = $(`<p>${item.collection_num} - ${item.pro_title}</p>`);
                                $('#box').append(oP);
                            })

                        })
                    })
                })
            })
        })
        //获取异步数据时，因为返回数据的时间不确定，将导致数据的顺序性发生错乱
        //为了保持数据的顺序性，将后一页的数据获取写在前一页的数据获取的回调函数中，这种形式叫做回调地狱
        // 怎样解决回调地狱问题呢？

    </script>
</body>

</html>